<!--
 * @Author: qiaoxin
 * @Date: 2024-04-10 16:02:27
 * @LastEditors: zll
 * @LastEditTime: 2024-08-29 09:51:24
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\personApply\component\card.vue
-->
<template>
  <view class="card" @click="toDetail">
    <view class="main flex items-stretch">
      <view class="flex-1">
        <wd-row>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">变更单号：</text>
                <text class="text">{{ _D.changeCode || '' }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">任务单号：</text>
                <text class="text">{{ _D.taskCode }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">任务名称：</text>
                <text class="text">{{ _D.projectName }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">需求单号：</text>
                <text class="text">{{ _D.demandCode }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">原任务负责人：</text>
                <text class="text">{{ _D.oldHeadName }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">申请后任务负责人：</text>
                <text class="text">{{ getTaskName(2) }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">原任务成员：</text>
                <text class="text">{{ _D.oldUserName }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">申请后任务成员：</text>
                <text class="text">{{ getTaskName(0) }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">预计完成日期：</text>
                <text class="text">{{ formatByDayjs(_D.userTime) }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">审核状态：</text>
                <text class="text">
                  <wd-tag
                    :bg-color="getStatus(_D.status)['color']"
                    :color="getStatus(_D.status)['color']"
                    plain
                  >
                    {{ getStatus(_D.status)['label'] }}
                  </wd-tag>
                </text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">创建人：</text>
                <text class="text">{{ _D.createName }}</text>
              </view>
            </view>
          </wd-col>
          <wd-col :span="is_big ? 12 : 24">
            <view class="row flex">
              <view class="col">
                <text class="label">创建时间：</text>
                <text class="text">{{ formatByDayjs(_D.createTime) }}</text>
              </view>
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// import { getCurrentInstance } from 'vue';
import { formatByDayjs } from '@/utils/util';
import { useDict } from '@/hooks/dict';

// const { appContext } = getCurrentInstance();
const props = defineProps({
  _D: {
    type: Object,
    default: () => {},
  },
  showFooter: {
    type: Boolean,
    default: false,
  },
  from: {
    type: String,
    default: '',
  },
});
const toDetail = () => {
  uni.navigateTo({
    url: `/pages/pm/personApply/detail?id=${props._D.id}&addType=edit`,
  });
};

const statusList = [
  {
    text: '未提交',
    value: '0',
    color: '#108ee9',
  },
  {
    text: '审批中',
    value: '1',
    color: '#d46b08',
  },
  {
    text: '已审核',
    value: '2',
    color: '#87d068',
  },
  {
    text: '驳回',
    value: '3',
    color: '#f50',
  },
  {
    text: '撤回',
    value: '9',
    color: '#f50',
  },
];
const { bill_status } = useDict('bill_status');
const getStatus = (status) => {
  if (status == null)
    return {
      text: '未提交',
      value: '0',
      color: '#108ee9',
    };
  const o1 = statusList.find((item) => item.value == status);
  const o = bill_status.value.find((item) => item.value == status);
  return o
    ? {
        ...o,
        color: o1.color,
      }
    : { text: status };
};
const getTaskName = (type) => {
  if (!props._D.changesDTOS || props._D.changesDTOS.length == 0) return '';
  const arr = props._D.changesDTOS.filter((item) => item.userType == type);
  if (arr && arr.length) {
    return arr.map((item) => item.userName).join(',');
  } else {
    return '';
  }
};
let is_big = ref(false);
onLoad(() => {
  const wWidth = uni.getSystemInfoSync().windowWidth;
  is_big.value = wWidth > 578 ? true : false;
});
onShow(() => {
  uni.onWindowResize((e) => {
    // console.log(e.size.windowWidth);

    if (e?.size?.windowWidth > 578) {
      is_big.value = true;
    } else {
      is_big.value = false;
    }
  });
});
</script>

<style scoped lang="scss">
.card {
  padding: 24rpx 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 15rpx;
  /* box-shadow: 0 15rpx 10rpx 0 #f7f7f7; */
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.main {
  .title_row {
    align-items: flex-start;
    overflow: hidden;
  }

  .title {
    flex: 1;
    margin-bottom: 32rpx;
    overflow: hidden;
    font-size: 32rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row {
    align-items: flex-start;
    margin-bottom: 6rpx;

    .col {
      display: flex;
      flex: 1;
      min-width: 50%;
      align-items: center;
      // line-height: 28rpx;

      ~ .col {
        margin-left: 12rpx;
      }

      .label {
        flex-shrink: 0;
        width: 240rpx;
        padding: 12rpx 0;
        font-size: 26rpx;
        color: #888;
      }

      .text {
        font-size: 28rpx;
        color: #000;
      }
    }
  }

  .left {
    overflow: hidden;
  }

  .right {
    flex-shrink: 0;
    margin-left: 12rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.footer {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  font-size: 24rpx;
  color: #666;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1rpx;
    content: '';
    background-color: #f3f3f3;
  }

  .unit ~ .unit {
    margin-left: 18rpx;
  }

  .action {
    position: relative;
    right: -24rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6rpx 24rpx;
    font-size: 26rpx;

    .btn {
      padding: 6rpx 12rpx;

      ~ .btn {
        margin-left: 16rpx;
      }
    }

    .primary {
      color: #007aff;
    }

    .danger {
      color: #f56c6c;
    }
  }
  /* // .action {
        // 	padding: 6rpx 0 6rpx;
        // 	font-size: 26rpx;
        // 	color: #007aff;
        // } */
}
</style>
